<!DOCTYPE html>
<html lang="en">
<head>
	<style>
		.modal-overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 2147483647;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.modal-content {
			background-color: white;
			padding: 40px;
			border-radius: 8px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
			max-width: 80%;
			max-height: 80%;
			overflow-y: auto;
			position: relative;
		}

		.modal-title {
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 20px;
			color: #333;
		}

		.modal-body {
			font-size: 16px;
			line-height: 1.6;
			color: #666;
			margin-bottom: 30px;
		}

		.modal-close {
			position: absolute;
			top: 15px;
			right: 20px;
			font-size: 24px;
			cursor: pointer;
			color: #999;
			background: none;
			border: none;
			padding: 5px;
		}

		.modal-close:hover {
			color: #333;
		}

		.modal-button {
			background-color: #007bff;
			color: white;
			border: none;
			padding: 12px 24px;
			border-radius: 4px;
			cursor: pointer;
			font-size: 16px;
		}

		.modal-button:hover {
			background-color: #0056b3;
		}
	</style>
</head>
<body>
	<input id="testinput">
	<button id="testbutton">Click me</button>

	<!-- Large Modal with z-index 2000 -->
	<div class="modal-overlay" id="largeModal">
		<div class="modal-content">
			<button class="modal-close" onclick="closeModal()">&times;</button>
			<div class="modal-title">Large Modal with High Z-Index</div>
			<div class="modal-body">
				<p>This is a large modal that demonstrates a z-index of 2147483647. The modal covers the entire viewport and is positioned above all other elements on the page.</p>
				<p>Key features of this modal:</p>
				<ul>
					<li>Z-index: 2147483647 (highest priority)</li>
					<li>Full viewport coverage</li>
					<li>Semi-transparent background overlay</li>
					<li>Centered content with responsive design</li>
					<li>Close button in top-right corner</li>
					<li>Scrollable content area</li>
				</ul>
				<p>This modal can be used for important notifications, confirmations, or detailed information displays that need to be prominently displayed above all other page content.</p>
			</div>
			<button class="modal-button" onclick="closeModal()">Close Modal</button>
		</div>
	</div>

	<script>
		function closeModal() {
			document.getElementById('largeModal').style.display = 'none';
		}

		// Show modal on page load
		window.onload = function() {
			document.getElementById('largeModal').style.display = 'flex';
		}
	</script>
</body>
</html>